<template>
  <div class="depart-tree">
    <el-popover
      ref="popover"
      placement="bottom"
      width="200"
      trigger="click"
      @show="handleShow"
      @hide="handleHide"
    >
      <el-tree
        class="my-tree"
        ref="tree"
        :data="departments"
        show-checkbox
        node-key="no"
        :check-strictly="true"
        size="small"
        @check="handleCheckTree"
        :props="defaultProps"
      >
      </el-tree>
    </el-popover>
    <div class="tree-name" v-popover:popover>
      <div v-if="departNames && departNames.length">
        <span class="depName">
          {{ departNames[0].deptName }}
          <span class="name-del"
            ><i class="el-icon-error" @click.stop="handleDelete"
          /></span>
        </span>
        <span class="depName" v-if="departNumber.length > 1"
          >+ {{ departNumber.length - 1 }}</span
        >
      </div>
      <div v-else class="no-tree-select">{{ "请选择部门" }}</div>
      <span
        style="color: #c0c4cc; transition: all 0.5s"
        class="el-icon-arrow-down"
        :class="[isShow ? 'is-reverse' : '']"
      ></span>
    </div>
  </div>
</template>
<script>
export default {
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    departments: {
      type: Array,
      default: () => ([])
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      handler () {
        this.$nextTick(() => {
          if (this.modelValue) {
            let selectKeys = this.$refs.tree.getCheckedKeys().length ? this.$refs.tree.getCheckedKeys() : this.modelValue.split(',')
            if (!this.$refs.tree.getCheckedKeys().length) {
              this.setDepartNames(selectKeys)
            }
            this.departNumber = selectKeys
            this.$refs.tree.setCheckedKeys(selectKeys)
          } else {
            this.departNames = []
            this.$refs.tree.setCheckedKeys([])
          }
        })
      }
    }
  },
  data: () => ({
    isShow: false,
    defaultProps: {
      children: 'children',
      label: 'deptName'
    },
    departNames: [],
    departNumber: []
  }),
  methods: {
    handleShow () {
      this.isShow = true
    },
    handleHide () {
      this.isShow = false
    },
    handleCheckTree () {
      this.departNames = this.$refs.tree.getCheckedNodes()
      this.handleChange()
    },
    handleDelete () {
      this.departNames.splice(0, 1)
      this.$refs.tree.setCheckedKeys(this.departNames.map(n => n.no))
      this.handleChange()
    },
    handleChange () {
      this.$emit('change', this.$refs.tree.getCheckedKeys().join(','))
    },
    setDepartNames (selectKeys) {
      // 处理输入框所需名字集合
      if (this.departments?.length) {
        this.departNames = this.setDepartments(this.departments, selectKeys)
      }
    },
    setDepartments (data, selectKeys) {
      // 递归
      let dataNames = []
      selectKeys.forEach(s => {
        data.forEach(d => {
          if (s === d.no) {
            dataNames.push(d)
            if (d.children.length) {
              this.setDepartments(d.children, selectKeys)
            }
          } else {
            if (d.children.length) {
              this.setDepartments(d.children, selectKeys)
            }
          }
        })
      })
      return dataNames
    }
  }
}
</script>
<style lang="scss" scoped>
.depart-tree {
  .tree-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
    padding: 0 15px;
    font-size: 12px;
    border: 1px solid #dcdfe6;
    border-radius: 16px;
    background-color: #fff;
    .depName {
      padding: 4px 8px;
      background: #f4f4f5;
      border-color: #e9e9eb;
      border-radius: 4px;
      color: #909399;
      margin-right: 8px;
      .name-del {
        color: #c0c4cc;
        &:hover {
          color: #909399;
        }
      }
    }
    .no-tree-select {
      font-size: 12px;
      color: #c0c4cc;
    }
  }
}
.my-tree {
  max-height: 300px;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.5);
    border-radius: 3px;
  }
}
.is-reverse {
  transform: rotateZ(-180deg);
}
</style>
